<template>
  <div class="container">
    <!-- {{user.areaId}}-{{tableId}}-{{areaType}} -->
    <DepartTree @isAreaType="isAreaType" @firstItem="getFirstItem"/>
    <div class="right" v-show="user.type=='0'&&noSelf">
      <DevicesList />
      <PersonList />
    </div>
    <div  v-show="user.type!='0'&&noSelf">
      <div v-show="tableId!=firstItem&&tableId!=user.areaId&&areaType=='D'&&tableId!='无'" class="right"><strong style="display:block;font-size:28px;text-aglin:center">{{$t('newDevices.noEdited')}}</strong></div>
      <div class="right" v-show="tableId==firstItem||tableId==user.areaId||areaType!='D'||tableId=='无'">
        <DevicesList />
        <PersonList />
      </div>
      
    </div>
    
    <!-- <div v-show="user.username!='superman'&&tableId!=user.areaId&&areaType=='D'" class="right"><strong style="display:block;font-size:28px;text-aglin:center">独立场所不能编辑</strong></div> -->
    <!-- <div v-show="areaType==''&&tableId!=user.areaId" class="right"><strong style="display:block;font-size:28px;text-aglin:center">独立场所不能编辑</strong></div> -->
  </div>
</template>

<script>
import DepartTree from './components/DepartTree'
import PersonList from './components/PersonList'
import DevicesList from './components/devicesList/devicesList'
export default {
  components: {
    DepartTree,
    PersonList,
    DevicesList
  },
  data () {
    return {
      // cutPageIndex: true,
      // data:JSON.parse(window.sessionStorage.getItem('editItem'))||'',
    //   modal1:false,
      areaType:'',
      firstItem:'',
      noSelf:false,
      user:JSON.parse(window.localStorage.getItem('user'))||''
    }
  },
  computed: {
    tableId () {
      return this.$store.state.tableId
    },
    storeAreaType () {
      return this.$store.state.areaType
    },
  },
  watch: {
    tableId () {
      return this.$store.state.tableId
    },
    storeAreaType () {
      return this.$store.state.areaType
    },
  },

  mounted () {
    // this.nextTick(v=>{
      setTimeout(() => {
      if(this.tableId==this.user.areaId){
        console.log('this.data.areaType',this.tableId,this.user.areaId)
        this.areaType=this.user.areaType
      }else{
        // console.log('this.data.areaType==0',this.data.areaType)
        
        console.log('this.data.areaType==1',this.storeAreaType)
        this.areaType=this.storeAreaType
        window.sessionStorage.setItem('storeAreaType',this.storeAreaType)
      }
      this.noSelf=true
      // if(this.areaType===''){
      //   console.log('this.data.areaType==0',this.data.areaType)
      //   this.areaType=this.data.areaType
      // }
    }, 500);
    // })
    
    
  },
  methods: {
    isAreaType(areaType){
      console.log('areaType',areaType)
      this.areaType=areaType
    },
    getFirstItem(firstItem){
      console.log('firstItem',firstItem)
      this.firstItem=firstItem
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  .clearfix();
  // display: flex;
  .right{
    // flex: 1;
    width: auto;
    // float: left;
    // display: inline-block;
  }
}
</style>
